<template>
	<view>
		<view class="date">
			<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" fields="month">
				<view class="uni-input">{{date}}<image src="../../static/xiala.png"></image></view>
			</picker>
		</view>
		<view class="box1">
			<view class="title">
				{{date}}
			</view>
			<view class="content">
				<view class="yiqiandao">
					<text class="title1">已签到</text>
					<text>{{total_community}}个小区</text>
				</view>
				<view class="yidengji">
					<text class="title1">已登记</text>
					<text>{{total_house}}户</text>
				</view>
			</view>
		</view>
		<view class="box2">
			<view class="list" v-for="(item,index) in list" :key="index">
				<text class="name">{{item.name}}</text>
				<text class="p">已登记：{{item.houses}}户</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				index: 0,
				date: currentDate,
				total_community:0,
				total_house:0,
				list:[]
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			bindDateChange: function(e) {
				let date = e.target.value.split('-').join('/');
				this.date = date;
				this.changeDate();
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				return `${year}/${month}`;
			},
			changeDate(){
				let moth=this.date.split('/')[1]
				if(parseInt(moth)<10){
					moth='0'+moth;
				}else{
					moth=''+moth;
				}
				let year_moth=this.date.split('/')[0]+'-'+moth;
				this.$http({
					url:'/user/workload',
					data:{
						"wx_user_id":'1',
						"year_moth":'2021-04'
					}
				}).then(res=>{
					this.total_community=res.data.data.total_community;
					this.total_house=res.data.data.total_house;
					this.list=res.data.data.list;
				})
			}
		},
		mounted(){
			this.changeDate();
		}
	}
</script>

<style scoped>
	.date{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 750rpx;
		height: 110rpx;
		font-size: 32rpx;
		font-weight: 600;
		padding-left: 30rpx;
	}
	.box1{
		width: 690rpx;
		height: 320rpx;
		margin: 0 auto;
		background: rgb(18,105,251);
		border-radius: 10rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;
	}
	.title{
		color: #fff;
		font-size: 44rpx;
	}
	.content{
		width: 690rpx;
		display: flex;
	}
	.yiqiandao{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		font-size: 32rpx;
		color: #fff;
	}
	.yidengji{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		font-size: 32rpx;
		color: #fff;
	}
	.title1{
		font-size: 24rpx;
		color: rgba(255,255,255,0.4);
		margin-bottom: 10rpx;
	}
	.box2{
		width: 630rpx;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		margin-top: 30rpx;
	}
	.list{
		display: flex;
		flex-direction: column;
		border-bottom: 2rpx solid rgb(228,228,228);
	}
	.name{
		font-size: 32rpx;
		font-weight: 600;
		margin-top: 30rpx;
	}
	.p{
		font-size: 24rpx;
		color: rgb(131,131,131);
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}
	image{
		width: 24rpx;
		height: 24rpx;
		margin-left: 20rpx;
	}
</style>
